
<%@ page language="java" contentType="text/html; charset=utf8"
	pageEncoding="utf8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Na`vi.App Store</title>
<!--list item-->
<link rel="stylesheet" type="text/css" href="references/css/style.css">
<script type="text/javascript" src="references/js/jquery-v1.7.1.js"></script>
<script type="text/javascript"
	src="references/js/jquery-hover-effect.js"></script>
	
<script>
function getNewApp(){
	$.ajax({
	    type: "POST",
	    url: "/Struts_1.3_WebApp_FrameWork/getNewAppAction.jms",
	    data: {
	    }
	    })
	.done(function (msg) {
	            $('#newApp').html(msg);
	            jQuery.getScript("references/js/grizzly-app-dock.js");
	    });
	}
	
function getBalance(){
	$.ajax({
	    type: "POST",
	    url: "/Struts_1.3_WebApp_FrameWork/getBalance.jms",
	    data: {
	    }
	    })
	.done(function (msg) {
	            $('#user-balance').html(msg);
	    });
	}
	
$(document).ready(function(){
		getNewApp();
		getBalance();
});

function getUpdateForm(appid){
        window.location.href="/Struts_1.3_WebApp_FrameWork/directorUpdateAppAction.jms?appid="+appid;
}

function buyItem(appid){
	
	$.ajax({
        type: "POST",
        url: "/Struts_1.3_WebApp_FrameWork/buyAppAction.jms",
        data: {
            appid: appid
        }
        })
    .done(function (msg) {
    	if(msg=='failed'){
    		alert('Link broken contact adminstrator for support.');
    	} else if(msg=='charge'){
    		window.location.assign("directorPayment.jms");
    	}else if(msg=='login'){
    		alert('You need login to download');
    	}else{
    		alert("Success!!! Click again to download");
    		getBalance();
    		$("#btn-buy-"+appid+"").attr("href",msg);
    		$("#btn-buy-"+appid+"").prop( "onclick", null );
    		$("#btn-buy-"+appid+"").attr("title","Download");
    	}
        });
}
</script>
<!-- processing -->
	<script type="text/javascript">
$(document).ready(function() {
	$('a.login-window').click(function() {
		
		// Getting the variable's value from a link 
		var loginBox = $(this).attr('href');

		//Fade in the Popup and add close button
		$(loginBox).fadeIn(300);
		
		//Set the center alignment padding + border
		var popMargTop = ($(loginBox).height() + 24) / 2; 
		var popMargLeft = ($(loginBox).width() + 24) / 2; 
		
		$(loginBox).css({ 
			'margin-top' : -popMargTop,
			'margin-left' : -popMargLeft
		});
		
	
		
		return false;
	});
	
	// When clicking on the button close or the mask layer the popup closed
	$('a.close, #mask').live('click', function() { 
	  $('#mask , .login-popup').fadeOut(300 , function() {
		$('#mask').remove();  
	}); 
	return false;
	});
});
</script>
	
<script type="text/javascript">
	//Image Hover
	jQuery(document)
			.ready(
					function() {
						jQuery(function() {
							
							jQuery('ul.da-thumbs > li').hoverdir();
							jQuery("#email1").attr("pattern",
									"[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$");
							jQuery("#email1").attr("required", "");
							jQuery("#email1").attr("placeholder",
									"Email Address");

							jQuery("#name").attr("required", "");
							jQuery("#name").attr("placeholder", "Name");
							jQuery("#username").attr("placeholder", "Username");
							jQuery("#username").attr("required", "");
							jQuery("#password").attr("placeholder", "Password");
							jQuery("#password").attr("required", "");

							jQuery("#password2").attr("required", "");
							jQuery("#username1").attr("required", "");
							jQuery("#username1")
									.attr("placeholder", "Username");
							jQuery("#password2")
									.attr("placeholder", "Password");
							
							jQuery("#username1").keypress(function(e) {
								if (e.which == 13) {
									jQuery("#loginbtn").click();
								}
							});
							jQuery("#password2").keypress(function(e) {
								if (e.which == 13) {
									jQuery("#loginbtn").click();
								}
							});
						});
						jQuery('#registerbtn')
								.click(
										function() {
											var id = jQuery('#username').val();
											var pwd = jQuery('#password').val();
											var name = jQuery('#name').val();
											var email1 = jQuery('#email1')
													.val();
											jQuery
													.ajax(
															{
																type : "POST",
																url : "/Struts_1.3_WebApp_FrameWork/register.jms",
																data : {
																	username : id,
																	password : pwd,
																	name : name,
																	email : email1
																}
															})
													.done(
															function(msg) {
																if (msg == 'success') {
																	window.location.href = "/Struts_1.3_WebApp_FrameWork";
																} else {
																	jQuery(
																			'.error-message-register')
																			.html(
																					msg);
																}
															});
										});
						jQuery('#loginbtn')
								.click(
										function() {
											var id = jQuery('#username1').val();
											var pwd = jQuery('#password2')
													.val();
											var callbackurl = document.URL;
											var lastChar = callbackurl
													.substr(callbackurl.length - 1);
											if (lastChar == "#") {
												callbackurl = callbackurl
														.substr(
																0,
																callbackurl.length - 1);
											}
											var last10Char = callbackurl.substr(callbackurl.length-10);
											if(last10Char=='logout.jms'){
												callbackurl=callbackurl.substr(0,callbackurl.length-10);
											}
											jQuery
													.ajax(
															{
																type : "POST",
																url : "/Struts_1.3_WebApp_FrameWork/login.jms",
																data : {
																	username : id,
																	password : pwd,
																}
															})
													.done(
															function(msg) {
																if (msg == 'success') {
																	window.location.href = callbackurl;
																} else {
																	jQuery(
																			'.error-message-login')
																			.html(
																					msg);
																}
															});
										});
					});
</script>

<script>
	function checkPass() {
		//Store the password field objects into variables ...
		var pass1 = document.getElementById('password');
		var pass2 = document.getElementById('re-password');
		//Store the Confimation Message Object ...
		var message = document.getElementById('confirmMessage');
		//Set the colors we will be using ...
		var goodColor = "#66cc66";
		var badColor = "#ff6666";
		//Compare the values in the password field 
		//and the confirmation field
		if (pass1.value == pass2.value) {
			//The passwords match. 
			//Set the color to the good color and inform
			//the user that they have entered the correct password 
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "Passwords Match!";
			return true;
		} else {
			//The passwords do not match.
			//Set the color to the bad color and
			//notify the user.
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = "Passwords Do Not Match!"
			return false;
		}
	}
</script>
<!-- Bootstrap -->
<link href="references/css/bootstrap.min.css" rel="stylesheet"
	type="text/css">
<link href="references/css/ribbon.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css"
	href="references/css/font-awesome.min.css">

<!--dock--->

<link rel='stylesheet' href='references/css/dock.css' type='text/css' />
<link rel='stylesheet' href='references/css/media-queries.css?ver=3.1.0'
	type='text/css' />

<script type='text/javascript'
	src='references/js/jquery-migrate.min.js?ver=1.2.1'></script>

<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

<style>
@font-face {
	font-family: 'Griffy';
	font-style: normal;
	font-weight: 400;
	src: local('Griffy'), local('Griffy-Regular'),
		url(references/fonts/font.woff) format('woff');
}

a.navbar-brand {
	font-family: 'Griffy', cursive;
}
</style>
</head>
<body>

	<hr class="colorgraph" style="margin: 0">
	<div class="contain-bg">

		<!--Header Container----->

		<nav class="navbar navbar-default" role="navigation">
		<div class="container-fluid">
			<!-- Brand and toggle get grouped for better mobile display -->
			<div class="navbar-header" style="margin-left: 25px;">
				<button type="button" class="navbar-toggle" data-toggle="collapse"
					data-target="#bs-example-navbar-collapse-1">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<html:link action="/goHome" styleClass="navbar-brand">	NAVI APP STORE</html:link>

			</div>

			<!-- Collect the nav links, forms, and other content for toggling -->
			<div class="collapse navbar-collapse"
				id="bs-example-navbar-collapse-1">
				<ul class="nav navbar-nav">
					<li><a href="pages/Contruction/index.html">About Us</a></li>
					<li><a href="pages/Contruction/index.html">Features</a></li>

					<li class="dropdown"><a href="#" class="dropdown-toggle"
						data-toggle="dropdown">Our Product<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><html:link action="/goHome">Computer Application</html:link></li>
							<li class="divider"></li>
							<li><a href="pages/Contruction/index.html">IOS Applications</a></li>
							<li class="divider"></li>
							<li><a href="pages/Contruction/index.html">BlackBerry Applications</a></li>
							<li class="divider"></li>
							<li><a href="pages/Contruction/index.html">Android Applications</a></li>
						</ul></li>

				</ul>

				<div class="col-xs-12 col-sm-3" style="padding: 0px;margin-top: 7px;">
					<div class="input-group c-search">
						<input type="text" id="searchText" class="form-control"> <span
							class="input-group-btn">
							<button class="btn btn-default" type="button"
								style="padding: 9px 12px;">
								<span class="glyphicon glyphicon-search text-muted"></span>
							</button>
						</span>
					</div>

					<ul class="list-group" id="searchResult"
						style="position: absolute; z-index: 9999; width: 100%;">
					</ul>
				</div>



				<logic:empty name="username">
					<button class="btn btn-success navbar-right hidden-xs"
						data-toggle="modal"
						style="margin-top: 10px; padding: 3px 3px;"
						data-target="#LoginModal"
						onclick="document.getElementById('error-message-login').innerHTML='';">Signed
						in</button>

					<html:link action="/directorLogin"
						styleClass="btn btn-success navbar-right hidden-sm hidden-md hidden-lg">Login</html:link>
					<html:link action="/directorRegister"
						styleClass="btn btn-warning navbar-right hidden-sm hidden-md hidden-lg">Register</html:link>


					<button class="btn btn-warning navbar-right hidden-xs"
						data-toggle="modal" style="margin-top: 10px; padding: 3px 3px;"
						data-target="#ResModal">Join Now</button>
				</logic:empty>

				<logic:notEmpty name="username">
					<ul class="nav navbar-nav navbar-right" style="margin-right:20px">
					
						<li class="dropdown">
						<a href="#" class="dropdown-toggle"
							data-toggle="dropdown"> <i class="fa fa-user"></i> <bean:write
									name="username" /> <b class="caret"></b></a>
							<ul class="dropdown-menu">
							
								<li>
									<div class="navbar-content">
										<div class="row" style="margin: 10px 0px 10px 0px;">
											<div class="col-md-5">
												<logic:equal name="role" value="Administrator">
													<img src="references/images/avatar-ad.jpg"
														alt="Alternate Text" class="img-responsive">
												</logic:equal>
												<logic:equal name="role" value="Member">
													<img src="references/images/avatar-user.jpg"
														alt="Alternate Text" class="img-responsive">
												</logic:equal>
												<logic:equal name="role" value="Developer">
													<img src="references/images/avatar-dev.jpg"
														alt="Alternate Text" class="img-responsive">
												</logic:equal>
													<html:link action="/viewUser.jms?usernameCheck=${userInfo.username}&roleCheck=${userInfo.role}"
														styleClass="btn btn-success btn-sm" style="margin-top:5px">View Profile</html:link>
												
											</div>
											<div class="col-md-7">
												<span><bean:write name="username" /></span>
												<p class="text-muted small">
													<bean:write name="role" />
													<b id="user-balance"><bean:write name="userInfo" property="balance" /></b>
												</p>
												<div class="divider"></div>

												<logic:notEqual name="role" value="Administrator">
													<html:link action="/directorViewProfile"
														styleClass="btn btn-primary btn-xs active">Update Proflie</html:link>

													<html:link action="/directorPayment"
														styleClass="btn btn-warning btn-xs"
														style=" margin-top: 5px;    padding-right: 7px;">
														<i class="fa fa-pied-piper">&nbsp; &nbsp; </i>Payment </html:link>


												</logic:notEqual>
												<logic:equal name="role" value="Administrator">
													<html:link action="/directorAdminPanel"
														styleClass="btn btn-danger btn-xs">Admin Control</html:link>
													
												</logic:equal>

												<logic:notEqual name="role" value="Member">
													<html:link action="/directorUpload"
														styleClass="btn btn-info btn-xs"
														style=" margin-top: 5px;    padding-right: 7px;">Upload app </html:link>

												</logic:notEqual>
												<logic:equal name="role" value="Member">
													<html:link action="/directorGoDev" style="margin-top:5px"
														styleClass="btn btn-success btn-xs active">Go Dev</html:link>
													<br>
												</logic:equal>
											</div>
										</div>
									</div>
									<div class="navbar-footer">
										<div class="navbar-footer-content">
											<div class="row">
												<div class="col-md-6">

												
													<html:link action="/directorChangePassword"
														styleClass="btn btn-default btn-sm">Change Password</html:link>

												</div>
												<div class="col-md-6">

													<html:link action="/logout"
														styleClass="btn btn-default btn-sm pull-right">Logout</html:link>
												</div>
											</div>
										</div>
									</div>
								</li>
							</ul></li>
							
		
					</ul>
	




				</logic:notEmpty>

<div class="col-xs-12 col-sm-3" style="padding: 0px;margin-top: 15px;">
	<button id="viewCart" onclick="viewCart()" class="btn btn-info btn-xs pull-right">Your Cart
	 <i style="margin-left:5px" class="fa fa-compress">(0)</i></button>
								
	<div id="cart-display" style="display:none">			
		<button style="margin-left:50px" class="btn btn-warning btn-xs" id="clearCart" onclick="clearCart()">Clear</button>
	<button id="checkOut" class="btn btn-success btn-xs" onclick="checkOut()">Check out</button>					
	<ul id="listAppCart" class="list-group" style="position: absolute; z-index: 9999; width: 100%; margin-bottom: 5px;margin-top: 15px;" >
	
	</ul>
	</div>


</div>

				<!-- Modal Login-->


				<html:form action="/login" method="post">
					<div class="modal fade" id="LoginModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Login</h4>
								</div>
								<div class="modal-body">

									<form role="form">

										<hr class="colorgraph">

										<div class="form-group">
											<html:text property="username"
												styleClass="form-control input-lg" styleId="username1"></html:text>

										</div>
										<div class="form-group">
											<html:password property="password"
												styleClass="form-control input-lg" styleId="password2"></html:password>
										</div>



										<hr class="colorgraph">
										<div class="error-message-login" id="error-message-login"></div>
									</form>

								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">Close</button>
									<button type="button" Class="btn btn-primary" id="loginbtn">Login</button>
								</div>
							</div>
						</div>
					</div>
				</html:form>
				<!-- Modal Login-->

				<!-- Modal Res-->
				<html:form action="/register" method="post"
					onsubmit="return checkPass();">
					<div class="modal fade" id="ResModal" tabindex="-1" role="dialog"
						aria-labelledby="myModalLabel" aria-hidden="true">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal"
										aria-hidden="true">&times;</button>
									<h4 class="modal-title" id="myModalLabel">Join Us Now !</h4>
								</div>
								<div class="modal-body">


									<hr class="colorgraph">

									<div class="form-group">
										<html:text property="username" styleId="username"
											styleClass="form-control input-lg"></html:text>
										<br>

									</div>

									<div class="row">
										<div class="col-xs-6 col-sm-6 col-md-6">
											<div class="form-group">
												<html:password property="password" styleId="password"
													styleClass="form-control input-lg"></html:password>
											</div>
										</div>
										<div class="col-xs-6 col-sm-6 col-md-6">
											<div class="form-group">
												<input type="password" id="re-password" required
													onkeyup="checkPass(); return false;"
													class="form-control input-lg"
													placeholder="Confirm Password">

											</div>
										</div>
									</div>

									<div class="form-group">
										<html:text property="email" styleId="email1"
											styleClass="form-control input-lg"></html:text>

									</div>
									<div class="form-group">
										<html:text property="name" styleId="name"
											styleClass="form-control input-lg"></html:text>
										<br>
									</div>
									<div class="row">
										<div class="col-xs-3 col-sm-3 col-md-3">
											<span class="button-checkbox">
												<button type="button" class="btn" data-color="info"
													tabindex="7">I Agree</button> <input type="checkbox"
												name="t_and_c" id="t_and_c" class="hidden" value="1">
											</span>
										</div>
										<div class="col-xs-9 col-sm-9 col-md-9">
											By clicking <strong class="label label-primary">Register</strong>,
											you agree to the <a href="#" data-toggle="modal"
												data-target="#t_and_c_m">Terms and Conditions</a> set out by
											this site, including our Cookie Use.
										</div>
									</div>

									<hr class="colorgraph">
									<span id="confirmMessage" class="confirmMessage"></span>

									<div class="error-message-register" id="error-message-register"></div>

									<logic:notEmpty name="ErrorInfo">
										<bean:write name="ErrorInfo" />
									</logic:notEmpty>


								</div>
								<div class="modal-footer">
									<button type="button" class="btn btn-default"
										data-dismiss="modal">Close</button>
									<button type="button" class="btn btn-primary" id="registerbtn">Register</button>

								</div>
							</div>
						</div>
					</div>
				</html:form>
				<!-- Modal Res-->

				</ul>
			</div>
			<!-- /.navbar-collapse -->
		</div>
		<!-- /.container-fluid --> </nav>


		<!--Header Container----->


		<!-- wrapper -->
		<div class="wrapper">
			<div class="main-wrapper">



				<!----slide----->


				<section id="show-space"> <script type="text/javascript">
					// Apps Slide Variable
					
					var apps_count = 4;
					var apps_show = 4;
				</script> 

				<div id="app-dock" class="clearfix app-dock-4">
					<div id="newApp" class="app-pack">


						<div class="app-icon">
							<a href="#" class="app-balloon-toggle-link"> <img
								src="references/images/portfolio8.jpg" width="120px"
								height="120px" />
							</a>

							<div class="app-info-balloon">
								<div class="app-title">Bulba the Cat</div>
								<div class="balloon-tail"></div>
							</div>
							<!-- .app-info-balloon" -->

							<div class="shadow">
								<div class="shadow-left"></div>
								<div class="shadow-body"></div>
								<div class="shadow-right"></div>
							</div>
						</div>
						<!-- .app-icon -->


						<div class="app-icon">
							<a href="#" class="app-balloon-toggle-link"> <img
								src="references/images/portfolio4.jpg" width="120px"
								height="120px" />
							</a>

							<div class="app-info-balloon">
								<div class="app-title">Jigsaw Mansion</div>
								<div class="balloon-tail"></div>
							</div>
							<!-- .app-info-balloon" -->

							<div class="shadow">
								<div class="shadow-left"></div>
								<div class="shadow-body"></div>
								<div class="shadow-right"></div>
							</div>
						</div>
						<!-- .app-icon -->


						<div class="app-icon">
							<a href="#" class="app-balloon-toggle-link"> <img
								src="references/images/portfolio5.jpg" width="120px"
								height="120px" />
							</a>

							<div class="app-info-balloon">
								<div class="app-title">Muffin Knight</div>
								<div class="balloon-tail"></div>
							</div>
							<!-- .app-info-balloon" -->

							<div class="shadow">
								<div class="shadow-left"></div>
								<div class="shadow-body"></div>
								<div class="shadow-right"></div>
							</div>
						</div>
						<!-- .app-icon -->


						<div class="app-icon">
							<a href="#" class="app-balloon-toggle-link"> <img
								src="references/images/portfolio6.jpg" width="120px"
								height="120px" />
							</a>

							<div class="app-info-balloon">
								<div class="app-title">FxCamera</div>
								<div class="balloon-tail"></div>
							</div>
							<!-- .app-info-balloon" -->

							<div class="shadow">
								<div class="shadow-left"></div>
								<div class="shadow-body"></div>
								<div class="shadow-right"></div>
							</div>
						</div>
						<!-- .app-icon -->


						<div class="app-icon">
							<a href="#" class="app-balloon-toggle-link"> <img
								src="references/images/portfolio7.jpg" width="120px"
								height="120px" />
							</a>

							<div class="app-info-balloon">
								<div class="app-title">Glow Hockey 2</div>
								<div class="balloon-tail"></div>
							</div>
							<!-- .app-info-balloon" -->

							<div class="shadow">
								<div class="shadow-left"></div>
								<div class="shadow-body"></div>
								<div class="shadow-right"></div>
							</div>
						</div>
						<!-- .app-icon -->


					</div>
				</div>
				<!-- #app-dock -->

				<div id="app-control"></div>


				</section>
				<!----nav-bar----->
				<!----nav-bar----->



				<div class="row" style="margin: 0px">
					<div
						class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bhoechie-tab-container"
						style="background: #f4f4f4;">
						<div class="col-lg-2 col-md-2 col-sm-3 col-xs-12 bhoechie-tab-menu">
						
							<div class="content">

								<ul class="ca-menu">
									<li class="lili"><html:link action="/goHome">
											<span class="ca-icon"><i class="fa fa-home"></i></span>
											<div class="ca-content">
												<h2 class="ca-main">Homepage</h2>
											</div>
										</html:link></li>
									<li class="lili"><html:link action="/listApp"> <span class="ca-icon"> <i
												class="fa fa-mobile"></i>
										</span>
											<div class="ca-content">
												<h2 class="ca-main">Computer Application</h2>
											</div>
									</html:link></li>
									<li class="lili"><a href="pages/Contruction/index.html"> <span class="ca-icon"> <i
												class="fa fa-apple"></i>
										</span>
											<div class="ca-content">
												<h2 class="ca-main">IOS App</h2>
											</div>
									</a></li>
									<li class="lili"><a href="pages/Contruction/index.html"> <span class="ca-icon"> <i
												class="fa fa-windows"></i>

										</span>
											<div class="ca-content">
												<h2 class="ca-main">Windows Phone App</h2>
											</div>
									</a></li>

									<li class="lili"><a href="pages/Contruction/index.html"> <span class="ca-icon"> <i
												class="fa fa-gamepad"></i>

										</span>
											<div class="ca-content">
												<h2 class="ca-main">BlackBerry App</h2>
											</div>
									</a></li>
									
								</ul>
							</div>

						</div>
						<div class="col-lg-10 col-md-9 col-sm-9 col-xs-12 bhoechie-tab"
							style="border-left: 1px solid #eee; background: #fff;">
							<div class="bhoechie-tab-content active">
								<center>
	<div id="login-box" class="login-popup">

  <form method="post" class="processing" action="#">
       <img src="references/images/loader1.gif" class="icon" />
  </form>
</div>
									<span class="section-line"
										style="visibility: hidden; padding: 0; margin: 0;"></span>
									<!-------------------------------------------- San Pham --------------------------------------------------->
									<!-- search -->


									<script>
										$("#searchText")
												.bind(
														'input',
														function() {
															var searchText = $(
																	"#searchText")
																	.val();
															if (searchText == null
																	|| searchText == "") {
																$(
																		"#searchResult")
																		.html(
																				"");
															} else {
																$
																		.ajax(
																				{
																					type : "POST",
																					url : "/Struts_1.3_WebApp_FrameWork/getAppBySearch.jms",
																					data : {
																						searchText : searchText
																					}
																				})
																		.done(
																				function(
																						msg) {
																					$(
																							"#searchResult")
																							.html(
																									msg);
																				});
															}

														});
									</script>



									<tiles:insertAttribute name="body" />


									<!-------------------------------------------- San Pham --------------------------------------------------->
								</center>
							</div>




						</div>
					</div>
				</div>

				<!---item-contain--->

				<!-- wrapper -->


			</div>

<!-- Cart -->


<script>
function getCountCart(){
	
	$.ajax(
			{
				type : "POST",
				url : "/Struts_1.3_WebApp_FrameWork/getCountCart.jms",
				data : {
				}
			})
	.done(
			function(msg) {
				$("#viewCart").html(msg);
			});
}
	function addToCart(appid){
		$.ajax(
				{
					type : "POST",
					url : "/Struts_1.3_WebApp_FrameWork/addToCart.jms",
					data : {
						appid: appid
					}
				})
		.done(
				function(msg) {
					alert("success");
						viewCart();
				});
	}
	function checkOut(){
		
		$.ajax(
				{
					type : "POST",
					url : "/Struts_1.3_WebApp_FrameWork/checkOut.jms",
					data : {
					}
				})
		.done(
				function(msg) {
					if(msg=="login"){
						alert("You must login to check out or your cart is empty.");
					}else
						if(msg=="charge"){
							window.location.href="/Struts_1.3_WebApp_FrameWork/directorPayment.jms"
						} else{
							$('#listAppCart').html(msg);
							getBalance();
						}
				});
	}
	function removeFromCart(appid){
		$.ajax(
				{
					type : "POST",
					url : "/Struts_1.3_WebApp_FrameWork/removeFromCart.jms",
					data : {
						appid: appid
					}
				})
		.done(
				function(msg) {
						viewCart();
				});
	}
	function clearCart(){
		
		$.ajax(
				{
					type : "POST",
					url : "/Struts_1.3_WebApp_FrameWork/clearCart.jms",
					data : {
					}
				})
		.done(
				function(msg) {
						viewCart();
				});
		
	}
	function viewCart(){
		$.ajax(
				{
					type : "POST",
					url : "/Struts_1.3_WebApp_FrameWork/viewCart.jms",
					data : {
					}
				})
		.done(
				function(msg) {
					getCountCart();
					if(msg=='failed'){
						$("#listAppCart").html("");
					}else {
						$("#listAppCart").html(msg);
					}
				});
	}
	
	$("#viewCart").click(function(){
		if($('#cart-display').css('display') == 'none'){
			$('#cart-display').show();
		} else{
			$('#cart-display').hide();
		}
	});
	$(document).ready(function(){
		viewCart();
	});
</script>
			<!-- chat app -->
	<logic:notEmpty name="username">

<div class="col-xs-12 col-md-2" style="padding:0px;position: fixed;bottom:0px;z-index:9999">
            <div class="panel panel-primary" style="margin:0px">
                <div class="panel-heading" id="accordion">
                    <span class="glyphicon glyphicon-comment"></span>Chat with <span id="listUserOnline"></span>
                    <div class="btn-group pull-right">
                        <a type="button" class="btn btn-default btn-xs" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </a>
                    </div>
                </div>
            <div class="panel-collapse collapse" id="collapseOne">
                <div class="panel-body" style="height: 120px;overflow: hidden;overflow-y:auto">
                    <ul class="chat" id="msgbox">
                       
                       
                    </ul>
                </div>
                <div class="panel-footer">
                    <div class="input-group">
                        <input  name="message" id="message" type="text" class="form-control input-sm" placeholder="Type your message here..." />
                        <span class="input-group-btn">
                            <button class="btn btn-warning btn-sm" id="sendbtn">
                                Send</button>
                        </span>
                    </div>
                </div>
            </div>
            </div>
        </div>
				
				<script type="text/javascript">
					$(document)
							.ready(
									function() {
										var wsUri = "ws://10.12.1.189:8080/ChatAppDemo/chatAppServlet?"
												+ "${sessionScope.username}";
										wsocket = new WebSocket(wsUri);
										//khi ket noi duoc mo
										wsocket.onopen = function(ev) {
											$('#msgbox')
													.append(
															"<li class='left clearfix'>"
								                            +"<div class='chat-body clearfix'>"
								                                +"<div class='header'>"
								                                 +"<strong class='primary-font'>"+"System"+"</strong>"
								                               +"</div>"
								                               +"<p>"
								                               +"Connected!!!"
								                               +"</p>"
								                            +"</div>"
								                        +"</li>");
										}
										//gui message  
										$('#sendbtn')
												.click(
														function() {
															var msg = $(
																	'#message')
																	.val();
															var des = $(
																	'#useronline')
																	.val();
															if (msg == "") { //chua nhap message
																return;
															}

															//tao doi tuong JSON
															var msg = {
																message : msg,
																des : des,
															};
															//gui chuoi json len server
															wsocket
																	.send(JSON
																			.stringify(msg));
															$('#message').val(
																	'');
														});

										//khi nhan dc message tu sever
										wsocket.onmessage = function(ev) {
											var msg = JSON.parse(ev.data); //chuyen chuoi JSON thanh doi tuong JSON
											var type = msg.type;
											if (type == 0) {
												var user = msg.list;
												var result = "<select id='useronline' style='color:black'>";
												for (var i = 0; i < user.length; i++) {
													result += "<option value='"+user[i]+"'>"
															+ user[i]
															+ "</option>";
												}
												result += "</select>";
												$('#listUserOnline').html(
														result);
											} else {
												var umsg = msg.message; //message
												var uname = msg.name; //ten
												$('#msgbox')
														.append(
																
																 "<li class='left clearfix'>"
										                            +"<div class='chat-body clearfix'>"
										                                +"<div class='header'>"
										                                 +"<strong class='primary-font'>"+uname+"</strong>"
										                               +"</div>"
										                               +"<p>"
										                               +umsg
										                               +"</p>"
										                            +"</div>"
										                        +"</li>");
											}
										};

										wsocket.onerror = function(ev) {
											$('#msgbox').append(
													"<li class='left clearfix'>"
						                            +"<div class='chat-body clearfix'>"
						                                +"<div class='header'>"
						                                 +"<strong class='primary-font'>System</strong>"
						                               +"</div>"
						                               +"<p>"
						                               +"System Down!!!"
						                               +"</p>"
						                            +"</div>"
						                        +"</li>");
										};
										wsocket.onclose = function(ev) {
											$('#msgbox')
													.append(
															"<li class='left clearfix'>"
								                            +"<div class='chat-body clearfix'>"
								                                +"<div class='header'>"
								                                 +"<strong class='primary-font'>"+"System"+"</strong>"
								                               +"</div>"
								                               +"<p>"
								                               +"Turn-off connection."
								                               +"</p>"
								                            +"</div>"
								                        +"</li>");
										};
									});
					$("#message").keypress(function(e) {
						if (e.which == 13) {
							$("#sendbtn").click();
						}
					});
				</script>
			</logic:notEmpty>
			<!-- footer-page -->

			<div id="footer">
				<div id="footer-in">

					<div id="sub-footer">
						<div class="getApp">
							<div class="socialNetwork">
								NaviApp.vn - Web app for all device<br> Giấy phép mạng xã
								hội 62/GXN-TTĐT
							</div>
							<div class="contentGetapp">
								<div id="appLinks">
										<html:link styleId="iphone" action="/goHome" >iPhone</html:link> 
										<html:link styleId="android" action="/goHome" >Android</html:link>
									<html:link styleId="blackberry" action="/goHome" >BlackBerry</html:link>
									 <html:link styleId="windowsphone" action="/goHome" >Windows Phone</html:link>
										<html:link styleId="other" action="/goHome" >Other</html:link>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>
			<div class="wrapper-footer">
				<div class="main-wrapper-footer">
					<p class="footer-copyright">
						Copyright © 2013-2014 Premium by VietHoang with Love. All Rights
						Reserved.<br> This is a demo store. Any orders placed through
						this store will not be honored or fulfilled.
					</p>
				</div>
			</div>


			<!-- footer-page -->

		</div>
	</div>

	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

	<script type='text/javascript'
		src='references/js/jquery.imagesloaded.js?ver=3.1.0'></script>
	<!-- Include all compiled plugins (below), or include individual files as needed -->
	<script src="references/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		function DropDown(el) {
			this.dd = el;
			this.initEvents();
		}
		DropDown.prototype = {
			initEvents : function() {
				var obj = this;

				obj.dd.on('click', function(event) {
					$(this).toggleClass('active');
					event.stopPropagation();
				});
			}
		};

		$(function() {

			var dd = new DropDown($('#dd'));

			$(document).click(function() {
				// all dropdowns
				$('.wrapper-dropdown-2').removeClass('active');
			});

		});
	</script>
	
</body>
</body>

</html>